<template>
  <section class="event-query-dialog">
    <!-- 每次关闭都销毁dom,使echarts能正确更新图表 -->
    <el-dialog v-model="showDialog" draggable width="1000" :modal="false" overflow destroy-on-close>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="事件信息" name="table">
          <TablePage />
        </el-tab-pane>
        <!-- 延迟渲染, 让echart能正确获取dom宽高 -->
        <el-tab-pane label="统计图" name="statistics" lazy>
          <!-- TODO: 尝试在进入echart页时手动调正chart大小 -->
          <EchartsPage />
        </el-tab-pane>
        <el-tab-pane label="热力图" name="heatMap">
          <div class="heat-map">
            <div class="switch">
              <span>设置热点图: </span>
              <el-switch v-model="showHeatMap" />
            </div>
            <div class="slider-radius">
              <span>热点半径: </span>
              <el-slider v-model="radius" :min="0" :max="100" show-input />
            </div>
            <div class="slider-blur">
              <span>模糊尺寸: </span>
              <el-slider v-model="blur" :min="0" :max="100" show-input />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </section>
</template>

<script setup>
import { ref, watch } from 'vue'
import TablePage from './TablePage.vue'
import EchartsPage from './EchartsPage.vue'

const showDialog = defineModel('showDialog')
const showHeatMap = defineModel('showHeatMap')
const { map, queryResultSource } = defineProps({
  map: {
    type: Object,
    required: true,
  },
  queryResultSource: {
    type: Object,
    required: true,
  },
})

const activeName = ref('table')
const radius = ref(10)
const blur = ref(10)

const heatMapLayer = new ol.layer.Heatmap({
  source: queryResultSource,
})
heatMapLayer.setRadius(radius.value)
heatMapLayer.setBlur(blur.value)

watch(showDialog, (val) => {
  if (!val) {
    activeName.value = 'table'
  }
})
watch(showHeatMap, (val) => {
  if (val) {
    map.addLayer(heatMapLayer)
  } else {
    map.removeLayer(heatMapLayer)
  }
})
watch(radius, (val) => {
  heatMapLayer.setRadius(val)
})
watch(blur, (val) => {
  heatMapLayer.setBlur(val)
})
</script>

<style lang="scss" scoped>
.event-query-dialog {
  .heat-map {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    padding-right: 50%;
  }
}
</style>
